<template>
  <div class="">
    <el-form ref="form" :model="form" :rules="rules" class="formEmbedTableRefactor mb20">
      <table>
        <caption>A/C Information</caption>
        <tr>
          <td><div style="min-width:108px;text-align:center">Primary A/C No.</div></td> 
          <td>
            <el-form-item prop="primaryAcct">
              <span>{{confirmMsg.acctNo}}</span>
            </el-form-item>
          </td>
          <td><div style="min-width:64px;text-align:center">A/C Type</div></td> 
          <td>
            <el-form-item prop="acctType">
              <div style="min-width:60px" v-if="confirmMsg.acctType == 'P'">Savings</div>
              <div style="min-width:60px" v-if="confirmMsg.acctType == 'S'">Time deposit</div>
            </el-form-item>
          </td>
          <!--<td>Transfer Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.tranCycleLimit}}</span>
            </el-form-item>
          </td>
          <td>HKD Bill Payment Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.bpCycleLimit}}</span>
            </el-form-item>
          </td>
          <td>Fixed Deposit Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.fixedDepCycleLimit}}</span>
            </el-form-item>
          </td>-->
        </tr>

        <tr v-for="(item,index) in confirmMsg.relatedAcctList">
          <td><div style="min-width:108px;text-align:center">A/C No.</div></td> 
          <td>
            <el-form-item prop="relatedAcct">
              <span>{{confirmMsg.relatedAcctList[index].acctNo}}</span>
            </el-form-item>
          </td>
          <td><div style="min-width:64px;text-align:center">A/C Type</div></td> 
          <td>
            <el-form-item prop="acctType">
              <!--<div v-model="confirmMsg.relatedAcctList[index].acctType" style="min-width:60px"></div>-->
              <div style="min-width:60px" v-if="confirmMsg.relatedAcctList[index].subType == 'P'">Savings</div>
              <div style="min-width:60px" v-if="confirmMsg.relatedAcctList[index].subType == 'S'">Time deposit</div>
            </el-form-item>
          </td>
          <!--<td>Transfer Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.tranCycleLimit}}</span>
            </el-form-item>
          </td>
          <td>HKD Bill Payment Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.bpCycleLimit}}</span>
            </el-form-item>
          </td>
          <td>Fixed Deposit Cycle Limit</td> 
          <td>
            <el-form-item>
              <span>{{confirmMsg.fixedDepCycleLimit}}</span>
            </el-form-item>
          </td>-->
        </tr>
      </table>
    </el-form>

    <el-form ref="form" :model="form" class="formEmbedTable mb20">
      <table>
        <caption>CUS Information</caption>
        <tr>
          <td>CUS.ID</td>
          <td>
            <span class="cOrange">{{confirmMsg.cusID}}</span>
          </td>
        </tr>   
        <tr v-for="legal in confirmMsg.cstInfo.legalList">
          <td>CNTY</td>
          <td>
            <span class="cOrange">{{legal.cnty}}</span>
          </td>
          <td>Document Type</td>
          <td>
            <span class="cOrange">{{legal.docType}}</span>
          </td>
          <td>Document Number</td>
          <td>
            <span class="cOrange">{{legal.docNo}}</span>
          </td>
        </tr>
        <!--<tr>
          <td>CNTY</td>
          <td>
            <span class="cOrange">{{confirmMsg.cnty}}</span>
          </td>
          <td>Document Type</td>
          <td>
            <span class="cOrange">{{confirmMsg.docType}}</span>
          </td>
          <td>Document Number</td>
          <td>
            <span class="cOrange">{{confirmMsg.docNo}}</span>
          </td>
        </tr>-->
      </table>
    </el-form>

    <el-form ref="form" :model="form" class="formEmbedTable mb20">
      <table>
        <!--<caption>证件信息</caption>-->
        <tr>
          <td>A/C Address</td>
          <td>
            <span class="cOrange">{{confirmMsg.acc_addr1}} {{confirmMsg.acc_addr2}} {{confirmMsg.acc_addr3}} {{confirmMsg.acc_addr4}}</span>
          </td>
        </tr>
        <tr>
          <td>ADDR.COUNTRY</td>
          <td>
            <span class="cOrange">{{confirmMsg.addr_cntry_code}}</span>
          </td>
        </tr>
        <tr>
          <td>Authorized Person</td>
          <td>
            <el-form-item>
              <span class="cOrange">{{confirmMsg.authorPerson}}</span>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>

    <div class="btnArea mt20 tac">
        <el-button type="primary" @click="nextStep">Submit</el-button>
        <el-button @click="preStep">Back</el-button>
    </div>

    <el-dialog :visible.sync="tipsDialogVisible" size=tiny class="tac" :close-on-click-modal="false" :close-on-press-escape="false">
          <div class="tableForm mt20">
            <span style="font-size:16px;">Are you sure to open account?</span>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="confirmSubmit">Confirm</el-button>
                <el-button @click="tipsDialogVisible=false">Cancel</el-button>
            </div>
        </div> 
    </el-dialog>

    <el-dialog title="Tips" :visible.sync="dialogVisible" size=tiny>
          <div class="tableForm mt20">
            <div class="transactionStatus">
              <ynet-icon Type="transactionStatus" NO="1"></ynet-icon>
              <span class="ml15">Success</span>
            </div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="dialogVisible=false">OK</el-button>
            </div>
        </div> 
    </el-dialog>

    <el-dialog :visible.sync="auditDialogVisible" size=tiny class="tac" :close-on-click-modal="false" :close-on-press-escape="false">
          <div class="tableForm mt20">
            <div class="transactionStatus">
              <ynet-icon Type="transactionStatus" NO="1"></ynet-icon>
              <span class="ml15">Successfully submit, pending authorization</span>
            </div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="auditDialogVisible= false,confirmEnter()">OK</el-button>
            </div>
        </div> 
    </el-dialog>
    
    <div>
      <ynet-authDialog ref="dialogTable"  @getAuthForm="getAuthForm"></ynet-authDialog>
    </div>
      <!--授权确认页面弹窗-->
    <!--<el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="authForm" :model="authForm" class="formEmbedTable" :rules="rules1">
            <table>
                <caption>Auth Confirmation</caption>
                <tr>
                    <td>Auth User No.:</td>
                    <td>
                        <el-form-item prop="authUserNo">
                            <el-input placeholder="enter user no." v-model="authForm.authUserNo"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>Auth password:</td>
                    <td>
                        <el-form-item prop="password">
                            <ynet-password v-model="authForm.password" :config="pwConfig" ref="password"></ynet-password>
                        </el-form-item>
                    </td>
                </tr>
            </table>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="dialogTableVisible = true,submitForm()">Confirm</el-button>
                <el-button @click="dialogTableVisible=false">Cancel</el-button>
            </div>
        </el-form>
    </el-dialog>-->
    <!--授权确认页面弹窗end-->
  </div>
</template>

<script>
export default {
  name:'confirmPage',
  components: {
  },
  props: {
    confirmMsg:{
      type: Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      auditDialogVisible: false,
      dialogTableVisible: false,
      tipsDialogVisible: false,
      authForm: { authUserNo: '', password: '',randomField:''},
      pwConfig: {
          pgeId: "pgeId",
          initId: "initId"
      },
      rules1:{
        authUserNo: [
          {required: true, message: 'User No. can not be empty', trigger: 'blur' },
          {min:6, max:20, message:'Length should be between 6-20', trigger: 'blur'},
          {trigger:'blur', validator:this.$tools.validator.isNum},
          {trigger:'blur', validator:this.$tools.validator.vaildateUserStt, vm:this}
        ],
        password: [
          { validator: this.$tools.validator.pwdValidator, vm: this, formName: 'authForm'},
        ],
      },
      needAuth: '',
      authType: '',
    }
  },
  mounted(){
    let _this = this
  },
  methods: {
    getAuthForm(val){
      let _this = this
      //获取授权数据
      _this.authForm = val;
      console.log("val:"+JSON.stringify(val))
      //将授权信息合并到提交给后台的对象中
      // _this.confirmMsg = $.extend(_this.confirmMsg, _this.authForm)
      _this.submitForm()  //自己页面提交给后台的.do方法
    },
    createTips(){
      let _this = this
      _this.tipsDialogVisible = true
    },
    confirmSubmit(){
      let _this = this
      _this.tipsDialogVisible = false
      _this.queryAuth()
    },
    queryAuth(){
      let _this = this
      let body = {};
      body.bsnCode="IM0401"
      body.version="IM0401"
      _this.$tools.request(_this,"IM010001.do",body).then(
        data=>{
          // debugger
          if(data.body.errorCode==0){
            if(data.body.needAuth==0){//无需授权
              _this.needAuth = 0
              _this.submitForm()
            }else if(data.body.needAuth==1 && data.body.authType==1){//临柜授权
              _this.needAuth=1;
              _this.authType=1;
              _this.authForm.authUserNo= ''
              // _this.dialogTableVisible=true;
              _this.$refs["dialogTable"].show()
            }else if(data.body.needAuth==1 && data.body.authType==2 ){//一录一审
              _this.needAuth=1;
              _this.authType=2;
              _this.submitForm()
            }else{
              _this.$alert('Exception of auth type, please check', 'Information', {
                  confirmButtonText: 'OK',
                  callback: action => {
                  }
              });
            }
          }else{
            _this.$alert(data.body.errorMsg,"Information",{
              confirmButtonText: 'OK',
              callback: action => {
              }
            })
          }
      })
    },
    submitForm() {
      let _this = this
      let queryData = {}
      let user = _this.$tools.storage.get('user', 'save')
      queryData.actionFlag = '0'
      queryData.bsnCode = 'IM0401'
      queryData.timestamps = _this.timestamps

      queryData.cusID = _this.confirmMsg.cusID
      queryData.cusNameEn = _this.confirmMsg.cstInfo.cusNameEn
      queryData.cusNameCn = _this.confirmMsg.cstInfo.cusNameCn
      queryData.cusSegment = _this.confirmMsg.cstInfo.cusSegment
      queryData.sector = _this.confirmMsg.cstInfo.sector
      queryData.channels = '00010000'

      queryData.relatedAcctList = _this.confirmMsg.relatedAcctList || []

      queryData.acctNo = _this.confirmMsg.acctNo
      queryData.acctType = _this.confirmMsg.category
      queryData.subType = _this.confirmMsg.acctType
      queryData.currency = _this.confirmMsg.currency
      queryData.acc_addr1 = _this.confirmMsg.acc_addr1
      queryData.acc_addr2 = _this.confirmMsg.acc_addr2
      queryData.acc_addr3 = _this.confirmMsg.acc_addr3
      queryData.acc_addr4 = _this.confirmMsg.acc_addr4
      queryData.addr_code = _this.confirmMsg.addr_code
      queryData.addr_cntry_code = _this.confirmMsg.addr_cntry_code
      queryData.authorPerson = _this.confirmMsg.authorPerson

      if(_this.needAuth == 1  && _this.authType == 1){
        queryData = $.extend(queryData, _this.authForm)
      }

      // _this.tipsDialogVisible = false
      // _this.dialogTableVisible = false
      _this.$tools.request(_this,"IM040102.do",queryData).then(
        data => {
          if('0' == data.body.errorCode){
            if(this.needAuth==1 && this.authType==2){
              this.$message({
                type:'success',
                message:'Waiting for Authorized',
              })
              _this.$emit("changeStep","2", $.extend(_this.confirmMsg, data.body))
            }else if(this.needAuth==1 && this.authType==1){
              if(data.body.authStatus==1){
                this.$message.error({
                  message:'Authorship No. or password wrong ,please resume load',
                  showClose:true,
                })
              }else{
                this.$message({
                  type:'success',
                  message:'Add Success',
                  showClose:true,
                })
              }
            }else{
              _this.$emit("changeStep","2", $.extend(_this.confirmMsg, data.body))
            }
            // if(_this.needAuth==1 && _this.authType==2){
            //   _this.auditDialogVisible = true
            // }else{
            //   // _this.dialogVisible = true
            //   _this.$emit("changeStep","2", $.extend(_this.confirmMsg, data.body))
            // }
          }else {
            _this.$alert("System Error Try again", "warning", 'warning', {
                confirmButtonText: 'Confirm',
                callback: action => {
                }
            });
            // _this.$alert(data.body.errorMsg, '提示', {
            //     confirmButtonText: '确定'
            // })
            // return
          }
      })
    },
    confirmEnter(){
      let _this = this
     
    },
    preStep(){
      let _this = this
      _this.$emit("changeStep","0",_this.confirmMsg)
    },
    nextStep() {
      let _this = this

      _this.createTips()
      return
      
      let body = {}
      body.cstNo = _this.confirmMsg.cusID
      body.cusNameEn = _this.confirmMsg.cstInfo.cusNameEn
      body.cusNameCn = _this.confirmMsg.cstInfo.cusNameCn
      body.cusSegment = _this.confirmMsg.cstInfo.cusSegment
      body.sector = _this.confirmMsg.cstInfo.sector
      body.channels = '00010000'

      body.relatedAcctList = _this.confirmMsg.relatedAcctList || []

      // body.acctNo = _this.confirmMsg.primaryAcct.acctNo
      // body.acctType = _this.confirmMsg.primaryAcct.category
      // body.subType = _this.confirmMsg.primaryAcct.acctType
      body.acctNo = _this.confirmMsg.acctNo
      body.acctType = _this.confirmMsg.category
      body.subType = _this.confirmMsg.acctType
      body.currency = _this.confirmMsg.currency
      body.acc_addr1 = _this.confirmMsg.acc_addr1
      body.acc_addr2 = _this.confirmMsg.acc_addr2
      body.acc_addr3 = _this.confirmMsg.acc_addr3
      body.acc_addr4 = _this.confirmMsg.acc_addr4
      body.addr_code = _this.confirmMsg.addr_code
      body.addr_cntry_code = _this.confirmMsg.addr_cntry_code
      body.authorPerson = _this.confirmMsg.authorPerson
      
      _this.$tools.request(this, "IM040102.do", body).then(data => {
        let errorCode = data.body.errorCode
        let errorMsg = "System Error Try again";
        if(errorCode == '0'){
          _this.$emit("changeStep","2", $.extend(_this.confirmMsg, data.body))
        }else{
          _this.$alert("System Error Try again", errorCode, {confirmButtonText: 'Confirm'});
        }
      })
    }
  }
}
</script>
